<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音乐播放列表</title>
    <link rel="stylesheet" href="css/music.css">
</head>

<body>
    <header>
        <div class="m-logo">
            <img src="./image/arrow-left.png" alt="arrow-left" width="40px" height="40px">
        </div>
        <div class="m-title">
            <h2>音乐播放列表</h2>
        </div>
    </header>

    <section id='app'>
        <ul id="music-list">
            <li v-for="music,index in musicList">
                <div class="m-icon-l">
                    <img :src="music.picture" alt="图片1">
                </div>
                <div class="m-content-r">
                    <h3>{{music.title}}</h3>
                    <p>{{music.artist}}</p>
                    <div>
                        <img :src='music.playimg' @click="onplayAndPause(index)">
                    </div>
                </div>
            </li>
        </ul>
    </section>

    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <script src="js/vue.js"></script>
    <script>
        /**
          思路:  1. 从网络获取音乐列表数据
                 2. 通过vue实现数据的绑定显示

                 3. 音乐播放
                     let audio = new Audio();
                     audio.src = url; //设置音乐资源
                     audio.load();  //加载资源
                     audio.play(); //播放音乐
                     audio.pause(); //暂停音乐

        */
        new Vue({
            el: '#app',
            data: {
                init: true,
                currentIndex: -1, //当前播放序号
                isPlay: false, //音乐状态
                musicList: [],
                audio: null,
            },
            methods: {
                //播放暂停
                onplayAndPause: function (id) {
                    this.initMusic(id);

                    if (this.currentIndex == id) {
                        //设置当前播放状态
                        if (this.isPlay) {
                            this.onPause(id);
                        } else {
                            this.onPlay(id);
                        }
                    } else {
                        // 重置播放状态为初始状态
                        // this.musicList.forEach(item => {
                        //     item.playimg = './image/pause.png';
                        // });
                        if (this.currentIndex != -1)
                            this.musicList[this.currentIndex].playimg = './image/pause.png';

                        this.onPlay(id);
                        this.currentIndex = id;
                    }
                },
                //音乐初始化
                initMusic(id){
                    this.audio.src = this.musicList[id].url; //设置音乐资源
                    this.audio.load(); //加载音乐
                },
                //音乐播放
                onPlay: function (id) {
                    this.audio.play();
                    this.isPlay = true;
                    this.musicList[id].playimg = './image/play.png';
                },
                //暂停音乐
                onPause: function (id) {
                    this.audio.pause();
                    this.isPlay = false;
                    this.musicList[id].playimg = './image/pause.png';
                }
            },

            created: function () {
                this.audio = new Audio(); //实例audio对象

                axios({
                    url: 'http://api.yuguoxy.com/api/song/list?pageNo=1&pageSize=10',
                    method: 'get'
                }).then(result => {
                    let lists = result.data.resultInfo.list;
                    lists.forEach(music => music.playimg = './image/pause.png');
                    this.musicList = lists;
                }).catch((err) => {
                    alert(err);
                });
            },
        })

        
    </script>
</body>

</html>